<!--  -->
<template>
  <div class="mouse-info" ref="mouseInfo"></div>
</template>

<script>
import { getAction } from '@/utils/helper'
let clickHandler
export default {
  props: {
    viewerId: {
      type: String,
      default: 'defaultViewId'
    }
  },
  data() {
    return {}
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  async mounted() {
    const { viewer, toolManager } = await getAction(
      this.viewerId
    )
    clickHandler = new Cesium.ScreenSpaceEventHandler(
      viewer.scene.canvas
    )
    clickHandler.setInputAction((e) => {
      // console.log('空白处', e)
      const position = new Cesium.Cartesian2(
        e.endPosition.x,
        e.endPosition.y
      )
      if (position) {
        const cartesian = viewer.scene.globe.pick(
          viewer.camera.getPickRay(position),
          viewer.scene
        )
        // const cartesian = viewer.camera.pickEllipsoid(
        //   position,
        //   viewer.scene.globe.ellipsoid
        // )
        if (cartesian) {
          // 世界坐标转地理坐标（弧度）
          const cartographic =
            viewer.scene.globe.ellipsoid.cartesianToCartographic(
              cartesian
            )
          if (cartographic) {
            // 海拔
            let altitude =
              viewer.scene.globe.getHeight(cartographic)
            // 视角海拔高度
            // const he = Math.sqrt(viewer.scene.camera.positionWC.x * viewer.scene.camera.positionWC.x + viewer.scene.camera.positionWC.y * viewer.scene.camera.positionWC.y + viewer.scene.camera.positionWC.z * viewer.scene.camera.positionWC.z)
            // const he2 = Math.sqrt(cartesian.x * cartesian.x + cartesian.y * cartesian.y + cartesian.z * cartesian.z)
            // 地理坐标（弧度）转经纬度坐标
            let point = [
              (cartographic.longitude / Math.PI) * 180,
              (cartographic.latitude / Math.PI) * 180
            ]
            if (!altitude) {
              altitude = 0
            }
            if (!point) {
              point = [0, 0]
            }
            var terrainProvider = viewer.terrainProvider
            var positions = [
              Cesium.Cartographic.fromDegrees(
                point[0],
                point[1]
              )
            ]
            var promise = Cesium.sampleTerrain(
              terrainProvider,
              18,
              positions
            )
            // Cesium.when(promise, (updatedPositions) => {
            //   // positions[0].height and positions[1].height have been updated.
            //   // updatedPositions is just a reference to positions.
            //   console.log(updatedPositions)
            //   this.$refs.mouseInfo.innerText = `海拔: ${altitude.toFixed(
            //     6
            //   )}米, 经度: ${point[0].toFixed(
            //     6
            //   )}, 纬度: ${point[1].toFixed(6)},
            //    `
            // })
            // console.log('视角高度', he - he2 + '米', '海拔', altitude + '米', '经度', point[0], '纬度', point[1])
          }
        }
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.mouse-info {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
  z-index: 11;
  color: #fff;
}
</style>
